<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('证券公司名称')" prop="securityName">
            <el-input v-model="form.securityName" :placeholder="$t('证券公司名称')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('证券账号')" prop="securityAccount">
            <el-input v-model="form.securityAccount" :placeholder="$t('证券账号')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('第三方存管账户')" prop="thirdAccount">
            <el-input v-model="form.thirdAccount" :placeholder="$t('第三方存管账户')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('存管账户开户行')" prop="bankAccount">
            <el-input v-model="form.bankAccount" :placeholder="$t('存管账户开户行')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('主体类型')" prop="investorType">
            <dictSelect
              v-model="form.investorType"
              :clearable="true"
              dictionary="main_body_type"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('主体名称')" prop="investorId">
            <MainBodySelect
              v-model="form.investorId"
              :parameters="form.investorType"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('是否是创投基金')" prop="ventureFund">
            <dict-select
              v-model="form.ventureFund"
              dictionary="sys_yes_no"
              :placeholder="$t('是否是创投基金')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('备注')" prop="remark">
            <el-input v-model="form.remark" type="textarea" maxlength="2000" show-word-limit :placeholder="$t('备注')" />
          </el-form-item>
        </el-col>
      </el-row>
      <!--证券账户持仓信息-->
      <div style="margin-top: 20px;">
        <div class="area-header">
          <span class="area-header-title">{{ $t('证券账户持仓信息') }}</span>
        </div>
        <el-table :data="form.listedPositionHoldList" border class="nowrapTable formTable" style="width: 100%">
          <el-table-column :label="$t('序号')" type="index" align="center" fixed show-overflow-tooltip width="50">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('项目')" align="center" show-overflow-tooltip min-width="160">
            <template slot-scope="scope">
              <el-form-item :prop="'listedPositionHoldList.' + scope.$index + '.dealName'">
                <el-input v-model="scope.row.dealName" disabled :placeholder="$t('项目')" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('证券代码')" align="center" show-overflow-tooltip min-width="160">
            <template slot-scope="scope">
              <el-form-item :prop="'listedPositionHoldList.' + scope.$index + '.stockCode'">
                <el-input v-model="scope.row.stockCode" :placeholder="$t('证券代码')" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('市值') + $t('金额单位')" align="center" min-width="160">
            <template slot-scope="scope">
              <el-form-item :prop="'listedPositionHoldList.' + scope.$index + '.marketValue'">
                <Money v-model="scope.row.marketValue" unit="w" disabled />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('最新收盘价(元/股)')" align="center" min-width="160">
            <template slot-scope="scope">
              <el-form-item :prop="'listedPositionHoldList.' + scope.$index + '.closePrice'">
                <Money v-model="scope.row.closePrice" disabled />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('持仓股数(万股)')" align="center" min-width="180">
            <template slot-scope="scope">
              <el-form-item :prop="'listedPositionHoldList.' + scope.$index + '.positionShare'">
                <Money v-model="scope.row.positionShare" :placeholder="$t('持仓股数(万股)')" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('更新时间')" align="center" min-width="160">
            <template slot-scope="scope">
              <el-form-item :prop="'listedPositionHoldList.' + scope.$index + '.updateTime'">
                <DatePicker v-model="scope.row.updateTime" :placeholder="$t('更新时间')" />
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <FileTable :list.sync="form.fileList" data-type="listed_security" :btn-show="!otherBtnHide" />
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存 取消按钮-->
      <el-button @click="cancel">{{ $t("取消") }}</el-button>
      <el-button v-hasPermi="['listed:security:edit']" type="primary" @click="submitForm">{{ $t("保存") }}</el-button>
    </div>
  </div>
</template>

<script>
import { saveListedSecurity, getListedSecurity } from '@/api/deal/listed/security/listedSecurity'
import MainBodySelect from '@/components/MainBodySelect/index'
export default {
  components: {
    MainBodySelect
  },
  data() {
    return {
      otherBtnHide: false,
      // 是否是创投基金字典
      ventureFundOptions: [],
      // 表单参数
      form: {
        fileList: [],
        listedPositionHoldList: []
      },
      // 遮罩层
      loading: false,
      formResource: '',
      // 表单校验
      rules: {
        securityName: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
        securityAccount: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
        ventureFund: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
        investorType: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
        investorId: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }]
      }
    }
  },
  created() {
  },
  methods: {
    // 初始化数据
    init(data) {
      if (data != null && data.id !== undefined) {
        getListedSecurity(data.id).then(response => {
          this.form = response.data
        })
      } else {
        this.reset()
      }
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        investorType: undefined,
        dealType: (this.$route.query.dealType === undefined ? (this.$route.query.pageType !== 'spo' ? 'equity' : 'spo') : this.$route.query.dealType),
        securityName: undefined,
        securityAccount: undefined,
        thirdAccount: undefined,
        bankAccount: undefined,
        investorId: undefined,
        ventureFund: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        delFlag: undefined,
        remark: undefined,
        fileList: [],
        listedPositionHoldList: []
      }
      this.resetForm('form')
    },
    // 取消按钮
    cancel() {
      if (this.formResource === 'listedDealForm') {
        this.reset()
        this.$parent.$parent.formOpen = false
      } else {
        this.$parent.$parent.formOpen = false
        this.$parent.$parent.reset()
      }
    },
    // 取消按钮
    setSource(source) {
      this.formResource = source
      this.reset()
    },
    // 关闭form页面
    closeForm() {
      // 关闭form页面遮罩层
      this.loading = false
      // 关闭form页面
      if (this.$parent.$parent.formOpen !== undefined) {
        this.$parent.$parent.formOpen = false
      }
      // 刷新list页面
      if (this.$parent.$parent.getList !== undefined) {
        this.$parent.$parent.getList()
      }
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          saveListedSecurity(this.form).then(response => {
            if (response.code === 200) {
              this.msgSuccess(this.$t('保存成功'))
              this.closeForm()
            } else {
              this.msgError(response.msg)
            }
            this.loading = false
          })
        } else {
          this.locationError(document)
        }
      })
    }
  }
}
</script>
